<template>
	<view class='comment'>
		
		<view class='content'>
			<view class="part">
				<view class='title'>{{$t('feedback.explain')}}：</view>
				<view class='partVal'>
					<u-textarea v-model="content" :placeholder="$t('feedback.placeholder2')"></u-textarea>
				</view>
				<view class='title' style="margin-top: 20rpx;">{{$t('feedback.star')}}：</view>
				<view>
					<u-rate :count="5" v-model="star"></u-rate>
				</view>
			</view>
			<view class="part">
				<view class='title'>{{$t('feedback.image')}}：</view>
				<view class='partVal'>
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" accept='image'
						multiple :maxCount="9"></u-upload>
				</view>
			</view>
			<u-button @click="postForm" type="primary" color='#f8e801' :text="$t('feedback.btn')"></u-button>
		</view>
	</view>
</template>

<script>
	import sidebar from '@/components/sidebar.vue'
	export default {
		components: {
			sidebar
		},
		data() {
			return {
				id: '',
				detail: {},
				goodsLists: [],
				rec_id: '',
				content: '',
				star: 5,
				fileList: [], //图片上传列表
				uploading: true
			};
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: this.$t('orderDetail.post_comment'),
			})
			this.id = options.id ?? ''
			this.init()
			this.rec_id = options.rec_id ?? ''
		},
		methods: {
			async init() {
				const result = await this.$api('/order/orderinfo', {
					id: this.id
				})
				this.detail = result.info
				this.goodsLists = result.goodslsit
			},
			// 新增图片
			async afterRead(event) {
				this.uploading = false
				await this.$tools.uploadfile(event, this.fileList)
				this.uploading = true
				console.log('fileList', this.fileList)
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event, 1)
			},
			//提交数据
			postForm() {
				if (this.content == '') {
					uni.showToast({
						title: this.$t('feedback.toast_title'),
						icon: 'none'
					})
					return
				}
				if (!this.uploading) {
					uni.showToast({
						title: this.$t('feedback.upload_tip'),
						icon: 'none'
					})
					return
				}
				this.$api('/Order/addcomment', {
					rec_id: this.rec_id,
					content: this.content,
					score: this.star,
					images: this.fileList.join()
				}).then(res => {
					setTimeout(() => {
						uni.navigateBack()
					}, 800)
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.part {
			.title {
				width: 100%;
				margin-bottom: 10px;
			}

			width: 100%;
			padding:12px;
			box-sizing: border-box;
			background: white;
			border-radius: 5px;
			margin-bottom: 12px;
		}

		width: 100%;
		padding:12px;
		box-sizing: border-box;
	}
</style>